<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星星消</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: aqua;
        }

        /* div{
            width: 100px;
            height: 30px;
            background-color: beige;
        } */
    </style>
</head>

<body>
    <div class="life" style="width:100px;height:30px;background:beige">
        <div class="healthPoint" style="width:100px;height:30px;background:brown"></div>
    </div>

</body>

</html>
<script>

    setInterval(function () {
        var imgObj = document.createElement('img')
        imgObj.src = './star.gif'
        var min = 30
        var max = 50
        var w = Math.floor(Math.random() * (max - min + 1) + min)
        imgObj.width = w
        var leftMax = document.documentElement.clientWidth || window.innerWidth - w
        var leftMin = 0
        var left = Math.floor(Math.random() * (leftMax - leftMin + 1) + leftMin)
        var topMin = 0
        var topMax = (document.documentElement.clientHeight || window.innerHeight) - w
        var top = Math.floor(Math.random() * (topMax - topMin + 1) + topMin)
        imgObj.style.position = 'absolute'
        imgObj.style.left = left + 'px'
        imgObj.style.top = top + 'px'
        document.body.appendChild(imgObj)

    }, 1000)
    document.body.onclick = function (e) {
        var e = e || window.event
        var imgObj = document.querySelectorAll('img')
        console.log(e.target);
        if (e.target.localName === 'img') {
            document.body.removeChild(e.target)
            var divObj = document.querySelector('.healthPoint')
            var life = parseInt(divObj.style.width)
            divObj.style.width = life + 7 + 'px'
        }

    }
    setInterval(function () {
        var divObj = document.querySelector('.healthPoint')
        var life = parseInt(divObj.style.width)
        divObj.style.width = life - 5 + 'px'

    }, 1000)
</script>